<template>
	<view>
		<view class="mask" v-if="showMask" @click="cancel"></view>
		<view class="dialog">
			<view class="content">
				<view class="title">{{ message }}<text @click="cancel" class="iconfont icon-guanbi5"></text></view>
			</view>
			<view class="actions">
				<button @click="confirm">确认</button>
				<button @click="cancel">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			message: {
				type: String,
				default: ''
			}
		},
		data(){
			return {
				showMask: true,
			}
		},
		methods: {
			confirm() {
				this.$emit('confirm');
				this.showMask = false;
			},
			cancel() {
				this.$emit('cancel');
				this.showMask = false;
			},
			show() {
				this.showMask = true;
			}
		}
	};
</script>


<style scoped lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.dialog {
		width: 60%;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		z-index: 1000;
	}

	.content {
		padding-bottom: 20px;
		
		.title {
			font-size: 32rpx;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;
		
			.iconfont {
				position: absolute;
				// left: 30rpx;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		
			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}
	}
	

	.actions {
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	button {
		padding: 10px 20px;
		// background-color: #007bff;
		@include main_bg_color(theme);
		color: #fff;
		border: none;
		border-radius: 5px;
	}
</style>